<template>
	<view>
		<view class="field-list">
			<view class="field-item">
				<text>{{$t('operate.businessIntroduction')}}</text>
				<view class="right">
					<view class="notEntered">
						<u-upload :action="action" ref='upload' :header="headers"
							@on-success="(res)=> uploadImg(res, 0)" @on-remove="(index)=>deletePic(index,0)"
							name="multipart" :max-count="1" :show-progress="false" :custom-btn="true" width="80"
							height="80" :file-list="fileListImg">
							<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
								{{$t('operate.pleaseUpload')}}
							</view>
						</u-upload>
						<text class="iconfont iconarrow-right1"></text>
					</view>
				</view>
			</view>
			<view class="field-item">
				<text>{{$t('operate.shoppingNotes')}}</text>
				<view class="right">
					<view class="notEntered">
						<u-upload :action="action" ref='upload1' :header="headers"
							@on-success="(res)=> uploadImg(res, 1)" @on-remove="(index)=>deletePic(index,1)"
							name="multipart" :max-count="1" :show-progress="false" :custom-btn="true" width="80"
							height="80" :file-list="fileListLogisticsImg">
							<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
								{{$t('operate.pleaseUpload')}}
							</view>
						</u-upload>
						<text class="iconfont iconarrow-right1"></text>
					</view>
				</view>
			</view>
		</view>
		<view class="tips">
			<p>{{$t('operate.note')}}：</p>
			<p>{{$t('operate.merchantIntroductionMapTips')}}</p>
			<p>{{$t('operate.merchantIntroductionMapTips1')}}</p>
			<p>{{$t('operate.merchantIntroductionMapTips2')}}</p>
		</view>
		<view class="bottomBox" :style="{paddingBottom: `${bottomLift}px`}">
			<view class="button">
				<view class="add-button" @click="addClick">{{$t('publicLang.save')}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	let app = getApp();
	import {
		mapGetters
	} from "vuex";
	import {
		HTTP_REQUEST_URL,
		TOKENNAME
	} from "@/config/app";
	import {
		channelMerImageInfo,
		channelMerImageInfoUpdate
	} from '@/api/api.js';
	export default {
		data() {
			return {
				action: "",
				headers: "",
				fileListImg: [],
				fileListLogisticsImg: [],
				formValidate: {
					logisticsImage: "",
					storeImage: '',
				},
				bottomLift: app.globalData.bottomLift,
			}
		},
		computed: mapGetters(["token", "merId"]),
		onLoad() {
			this.action = `${HTTP_REQUEST_URL}api/admin/upload/oss/image?model=content&pid=0`;
			this.headers = {
				[TOKENNAME]: this.token,
			};
			console.info(this.merId)
			this.getList();
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.$t('navigation.businessinformation')
			});
		},
		methods: {
			// 列表
			getList() {
				let _this = this
				_this.$refs.upload.clear();
				_this.fileListImg = []
				_this.$refs.upload1.clear();
				_this.fileListLogisticsImg = []
				channelMerImageInfo().then(res => {
					console.info(res.data)
					this.formValidate.logisticsImage = res.data.logisticsImage
					this.formValidate.storeImage = res.data.storeImage
					if (res.data.storeImage) {
						_this.fileListImg.push({
							url: res.data.storeImage
						});
					}
					if (res.data.logisticsImage) {
						_this.fileListLogisticsImg.push({
							url: res.data.logisticsImage
						});
					}
				}).catch(err => {

				})
			},
			addClick() {
				let _this = this
				channelMerImageInfoUpdate(this.formValidate).then(() => {
					_this.$util.Tips({
						title: _this.$t('publicLang.successfulOperation')
					});
					_this.getList()
				})
			},
			uploadImg(res, type, index) {
				// 0是商品介绍，1是购物须知
				if (type == 0) {
					this.formValidate.storeImage = res.data.url
				}
				if (type == 1) {
					this.formValidate.logisticsImage = res.data.url
				}
			},
			deletePic(index, type, index1) {
				// 0是商品介绍，1是购物须知
				if (type == 0) {
					this.formValidate.storeImage = ""
				}
				if (type == 1) {
					this.formValidate.logisticsImage = ""
				}
			},
		}
	}
</script>

<style lang="scss">
	.field-list {
		background-color: #FFFFFF;

		.field-item {
			color: #666666;
			height: 108rpx;
			padding: 0 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx solid #F5F5F8;

			.right {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				flex: 1;
				text-align: right;
				margin-left: 20rpx;

				.notEntered {
					display: flex;
					align-items: center;
					color: #BBBBBB;
				}

				.iconfont {
					font-size: 20rpx;
				}

				.placeholderClass {
					color: #BBBBBB;
				}

				input {
					width: 100%
				}
			}

			.right ::v-deep .u-delete-icon {
				width: 30rpx;
				height: 30rpx;
				top: 0rpx;
				right: 0rpx;
			}
		}
	}

	.tips {
		color: #BBBBBB;
		font-size: 20rpx;
		margin: 45rpx 40rpx;
	}

	.bottomBox {
		background-color: #FFFFFF;
		width: 100%;
		position: fixed;
		bottom: 0;
	}

	.button {
		width: 100%;
		height: 128rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.add-button {
		width: 690rpx;
		height: 92rpx;
		background-color: #111111;
		color: #FFFFFF;
		font-size: 32rpx;
		text-align: center;
		line-height: 92rpx;
	}
</style>
